<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="用户名称">
          <el-input v-model="name" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
        <el-tag type="success" style="margin-left: 10px; margin-top: 5px;">
          <span>系统共提交审批流程总数为：</span><span>{{ workflowStatDesc.total }}，</span>
          <span>已完成审批流程个数：</span><span>{{ workflowStatDesc.completed }}，</span>
          <span>待审批流程个数为：</span><span>{{ workflowStatDesc.incomplete }}，</span>
          <span>具体待办流程统计如下：</span>
        </el-tag>
      </el-form>
    </div>
    <div class="detail">
      <com-table
        :data="dataList"
        :columns="columns"
        :total="total"
        @pageChange="pageChange"
      />
    </div>
  </div>
</template>

<script>
import { getWorkflowStatDesc, getWorkflowStatDetail } from '@/api/monitorPlatform'
export default {
  name: 'BidInfo',
  components: {},
  data() {
    return {
      workflowStatDesc: {
        total: 0,
        completed: 0,
        incomplete: 0
      },
      name: '',
      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      optType: 'add',
      columns: [
        {
          label: '用户名称',
          prop: 'name'
        },
        {
          label: '代办流程总数',
          prop: 'total'
        },
        {
          label: '近三天',
          prop: 'day0'
        },
        {
          label: '三到七天',
          prop: 'day3'
        },
        {
          label: '七天以上',
          prop: 'day7'
        }
      ]
    }
  },
  mounted() {
    this.getWorkflowStatDesc()
    this.getDataList()
  },
  methods: {
    // 获取流程统计描述
    getWorkflowStatDesc() {
      getWorkflowStatDesc().then((res) => {
        const { data } = res || {}
        if (data) {
          this.workflowStatDesc = data
        }
      })
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        name: this.name
      }
      getWorkflowStatDetail(params).then((res) => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    search() {
      this.getDataList()
    },
    reset() {
      this.name = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail {
  height: calc(100% - 50px);
}
</style>
